<template>
  <div class="main-content">

    <div>
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in activityList" :key="item.id">
          <div style="margin-bottom: 10px; cursor: pointer;" @click="detailActivity(item.id)">
            <img :src="item.img" alt="" style="width: 100%; height: 170px; display: block; border-radius: 5px 5px 0 0;">
            <div
              style="padding: 10px; background-color: #fff; box-shadow: -3px 3px 3px -2px rgba(0,0,0,0.1), 3px 3px 3px -2px rgba(0,0,0,0.1);">
              <div class="line2" style="height: 40px; margin-bottom: 5px">{{ item.activityName }}</div>
              <div style="font-size: 13px;  color: #666;">{{ customFormatterData(item.startDate) }} ~ {{
                customFormatterData(item.endDate) }}</div>
              <div style="text-align: right;margin-top: 5px;">
                <el-tag size="mini" v-if="Date.now() > item.startDate && Date.now() < item.endDate">活动进行中...</el-tag>
                <el-tag v-if="item.startDate > new Date()" size="mini" type="success">待开始</el-tag>
                <el-tag v-if="item.endDate < new Date()" size="mini" type="warning">已结束</el-tag>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin: 10px 0" v-if="total">
      <el-pagination background @current-change="handleCurrentChange" :current-page="page" :page-size="pageSize"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { customFormatterData } from '@/utils/dateTimeFormatter'
export default {
  name: "FrontActivity",
  data() {
    return {
      page: 1,
      pageSize: 100,
    }
  },
  created() {
    this.userActivityListActions({
      page: this.page,
      pageSize: this.pageSize,
    });
  },
  computed: {
    ...mapState('userActivity', ['activityList','total'])
  },
  methods: {
    customFormatterData,
    ...mapActions('userActivity', ['userActivityListActions']),
    handleCurrentChange(pageNum) {
      console.log(pageNum);
    },
    detailActivity(id) {

      this.$router.push('/front/activityDetail?id=' + id)
    }
  }
}
</script>

<style scoped>

</style>